<template>
	<view class="reply-warp">
		<view class="container">
			<view class="reply-wrap bg-white">
				<view class="landlord-wrap">
					<image :src="commentor.portrait" class="avatar" />
					<view class="info">
						<view class="commentor flex-x-between w100">
							<view class="block name">{{commentor.name}}
								<text class="landlord">楼主</text>
							</view>
							<view class="like text-center">
								<text :class="{'iconfontPT like-icon block': true, 'icondianzan-xuanzhong': commentor.dz_state, 'icondianzan-weixuanzhong': !commentor.dz_state }"
								 @click="handleCommentLike"></text>
								<text :class="{'gray': true, 'theme': commentor.dz_state}">{{commentor.fabulous}}</text>
							</view>
						</view>
						<view class="comment-content w100">
							<rich-text class="block content" :nodes="commentor.content"></rich-text>
							<view class="flex-x-start">
								<text class="gray comment-date">{{commentor.time}}</text>
							</view>
						</view>
						<view class="like-list" v-if="likeListAvatar.length">
							<image v-for="(item, index) in likeListAvatar" :src="item" class="like-avatar" :key="index"></image>
							等{{replyList.length}}人觉得很赞
						</view>
					</view>
				</view>
				<view class="title">全部回复</view>
				<view class="reply-body">
					<view class="item" :key="index" v-for="(item, index) in replyList">
						<image :src="item.portrait" class="avatar" />
						<view class="info">
							<view class="commentor flex-x-between w100">
								<view class="block name">{{item.name}}</view>
								<view class="like text-center">
									<text :class="{'iconfontPT like-icon block': true, 'icondianzan-xuanzhong': item.dz_state, 'icondianzan-weixuanzhong': !item.dz_state }"
									 @click="handleReplyLike(item.dz_state, item.id, index)"></text>
									<text :class="{'gray': true, 'theme': item.dz_state}">{{item.fabulous}}</text>
								</view>
							</view>
							<view class="comment-content w100">
								<rich-text class="block content" :nodes="item.content"></rich-text>
								<view class="flex-x-start">
									<text class="gray comment-date">{{item.time}}</text>
									<text @click="handleCallSomeone(item.name, item.content, item.pid, item.uid)" class="comment-reply-number">回复</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="occupying"></view>
			<commentForm ref="myCommentForm" :cid="cid" :m_uid="propsUid" :m_pid="propsPid" :isLike="commentor.dz_state"
			 :commentNumber="commentNumber" :callObject="callObject" @onSetLike="handleCommentLike" @updateComment="handleUpdateComment"></commentForm>
		</view>
	</view>
</template>

<script>
	import commentForm from '.././comment-form/index.vue'
	import {
		addLike,
		deleteLike,
		getCommentDetail
	} from '../../../apis/life-circle/index.js';

	export default {
		data() {
			return {
				cid: 0,
				m_uid: 0,
				m_pid: 0,
				callObject: {},
				likeListAvatar: [],
				commentor: {},
				replyList: []
			}
		},
		computed: {
			propsUid() {
				return this.uid || this.m_uid
			},
			propsPid() {
				return this.pid || this.m_pid
			},
			commentNumber() {
				return this.replyList.length
			}
		},
		components: {
			commentForm
		},
		onLoad(options) {
			const {
				cid,
				pid,
				m_pid,
				m_uid,
			} = options
			this.m_pid = m_pid
			this.m_uid = m_uid
			this.pid = pid
			this.cid = cid
			let callObject = uni.getStorageSync('callObject'),
				name = options.name ? options.name : callObject.name,
				content = options.content ? options.content : callObject.content;
			 
			this.callObject = {
				name,
				content
			}
		},
		onShow() {
			this.getComment()
		},
		methods: {
			handleUpdateComment() {
				this.getComment()
			},
			getComment() {
				const params = {
					pid: this.propsPid,
					cid: this.cid
				}
				this.$loading.show()
				getCommentDetail(params).then(res => {
					if (+res.code === 200) {
						this.commentor = res.data.comment_desc
						this.replyList = res.data.hf

						for (let i = 0; i < 3; i++) {
							res.data.fabulous_list[i] && (this.likeListAvatar[i] = res.data.fabulous_list[i].portrait)
						}
						this.$loading.hide()
					}
				})
			},
			handleCallSomeone(name, content, pid, puid) {
				this.callObject = {
					name,
					content
				}

				this.$refs['myCommentForm'].handleShowPractical(1, pid, puid)
			},
			handleReplyLike(isLike, hfid, i) {
				let likeNumber = this.replyList[i].fabulous,
					params = {
						hfid,
						pid: +this.pid,
						cid: +this.cid,
					};

				if (isLike) {
					this.$loading.show()
					deleteLike(params).then(res => {
						if (+res.code === 200) {
							this.replyList[i].dz_state = 0
							this.replyList[i].fabulous = likeNumber - 1
							this.$loading.hide()
						}
					})
				} else {
					this.$loading.show()
					addLike(params).then(res => {
						if (+res.code === 200) {
							this.replyList[i].dz_state = 1
							this.replyList[i].fabulous = likeNumber + 1
							this.$loading.hide()
						}
					})
				}
			},
			handleCommentLike() {
				let isLike = this.commentor.dz_state,
					likeNumber = this.commentor.fabulous,
					params = {
						hfid: '',
						pid: +this.pid,
						cid: +this.cid,
					};

				if (isLike) {
					this.$loading.show()
					deleteLike(params).then(res => {
						if (+res.code === 200) {
							this.commentor.dz_state = 0
							this.commentor.fabulous = likeNumber - 1
							this.$loading.hide()
						}
					})
				} else {
					this.$loading.show()
					addLike(params).then(res => {
						if (+res.code === 200) {
							this.commentor.dz_state = 1
							this.commentor.fabulous = likeNumber + 1
							this.$loading.hide()
						}
					})
				}
			},
		},
	}
</script>

<style lang="less">
	.reply-warp {
		background: #ffffff;
		border-top: 1rpx solid rgba(206, 200, 200, .5);

		.container {
			padding: 0;
		}

		.mask {
			background: rgba(51, 51, 51, .6);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 110;
		}

		.occupying {
			height: 166rpx;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}

		.reply-wrap {
			.title {
				padding-left: 30rpx;
				padding-top: 20rpx;
				color: #333333FF;
			}

			.landlord-wrap {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid rgba(206, 200, 200, 1);

				.info {
					width: 78vw;
					margin-left: 25rpx;

					.commentor {
						margin-bottom: 20rpx;

						.name {
							color: #666666;

							.landlord {
								font-size: 20rpx;
								border: 1rpx solid #999999FF;
								padding: 0rpx 5rpx;
								border-radius: 8rpx;
								margin-left: 15rpx;
								color: #999999FF;
							}
						}

						.like {
							width: 38rpx;
							line-height: 40rpx;

							.like-icon {
								font-size: 40rpx;

								&.icondianzan-xuanzhong {
									color: #E41805;
								}
							}
						}
					}

					.comment-content {
						.content {
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}

						.comment-date {
							font-size: 24rpx;
						}

						.comment-reply-number {
							margin-left: 40rpx;
							font-size: 20rpx;
							color: #333333;
							height: 40rpx;
							line-height: 40rpx;
						}
					}

					.like-list {
						.like-avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 100%;
							vertical-align: bottom;
							margin-right: 10rpx;
							color: #333333;
						}
					}
				}
			}

			.reply-body {
				padding: 30rpx 30rpx;

				.item {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
					margin-bottom: 60rpx;

					.info {
						width: 78vw;
						margin-left: 25rpx;

						.commentor {
							.name {
								color: #666666;

								.landlord {
									font-size: 20rpx;
									border: 1rpx solid #999999FF;
									padding: 0rpx 5rpx;
									border-radius: 8rpx;
									margin-left: 15rpx;
								}
							}

							.like {
								width: 38rpx;
								line-height: 40rpx;

								.like-icon {
									font-size: 40rpx;

									&.icondianzan-xuanzhong {
										color: #E41805;
									}
								}
							}
						}

						.comment-content {
							.content {
								font-size: 30rpx;
								margin-bottom: 10rpx;
							}

							.comment-date {
								font-size: 24rpx;
							}

							.comment-reply-number {
								margin-left: 40rpx;
								font-size: 20rpx;
								color: #333333;
								height: 40rpx;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
